<template>
    <div class="mb60 mt60">
        <van-nav-bar left-arrow @click-left="$router.back()" fixed title="校园超市" />
        <van-search @search="search" shape="round" v-model="keywords" placeholder="请输入搜索关键词" />
        <div class="history-title">
            <h3>历史搜索</h3>
            <span @click="clearKeywords">清空历史记录</span>
        </div>
        <div class="history-list">
            <div @click="keywordsClick(item)" v-for="(item, index) in keywordsList" :key="index">{{ item }}</div>
        </div>
        <!-- 商品列表 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-card lazy-load @click="goGoods(item.id)" v-for="item in goodsList" :key="item.id" :price="item.price"
                    :title="item.goodsname" :thumb="$baseUrl + item.img" />
            </van-list>
            <van-empty v-if="goodsList.length === 0" description="暂无搜索结果"></van-empty>
        </van-pull-refresh>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isLoading: false,
            loading: false,
            finished: false,
            // 搜索关键词
            keywords: "",
            // 搜索结果
            goodsList: [],
            // 搜索关键词
            keywordsList: [],
            // 页码
            page: 1,
            // 每页显示数据条数
            size: 5,
            // 商品数量
            total: 0
        }
    },
    mounted() {
        if (this.$route.query.keywords) {
            this.keywords = this.$route.query.keywords;
        }
        // 读取搜索关键词
        this.getSearchHistory();
    },
    watch: {
        // 搜索关键词发生变化, 重置页面数据
        keywords() {
            this.goodsList = [];
            this.page = 1;
            this.finished = false;
        }
    },
    methods: {
        onRefresh() {
            // 下拉loading效果会自动开启, 开发者只需要在数据请求结束之后或者不需loading的时候关闭loading效果即可
            if (!this.keywords) {
                this.isLoading = false;
                this.$toast('请输入搜索关键词');
                return false;
            }
            this.page = 1;
            this.goodsList = [];
            this.search();

        },
        onLoad() {
            // 上拉加载loading效果, 会自动开启, 开发者只需要是在数据请求完毕之后, 关闭loading效果即可
            if (this.goodsList.length < this.total) {
                this.page += 1;
                this.search();
            }
        },
        goGoods(id) {
            this.$router.push({ name: "goods", query: { id } });
        },
        clearKeywords() {
            // 清除本地存储中的搜索关键词
            localStorage.removeItem('keywordsList');
            // 更新页面
            this.keywordsList = [];
        },
        // 读取本地存储中的搜索关键词
        getSearchHistory() {
            this.keywordsList = JSON.parse(localStorage.getItem('keywordsList') || '[]');
        },
        keywordsClick(keywords) {
            this.keywords = keywords;
            this.search();
        },
        search() {
            if (!this.keywords) {
                this.$toast('请输入搜索关键词');
            }
            this.$router.replace({ name: 'search', query: { keywords: this.keywords, rand: Math.random() } });
            // 通过本次存储记录搜索关键词
            this.keywordsList = JSON.parse(localStorage.getItem('keywordsList') || '[]');
            if (!this.keywordsList.includes(this.keywords)) {
                this.keywordsList.unshift(this.keywords);
            }
            // 更新本地存储
            localStorage.setItem('keywordsList', JSON.stringify(this.keywordsList));
            const { keywords, page, size } = this;
            this.$axios.get('/search', { params: { keywords, page, size } }).then(res => {
                if (res.code === 200) {
                    this.goodsList = [...this.goodsList, ...res.list.goodsList];
                    this.total = res.list.total;
                    // 关闭loading
                    this.loading = false;
                    this.isLoading = false;
                    if (this.total === this.goodsList.length) {
                        // 数据加载完毕
                        this.finished = true;
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.history-title>span {
    font-size: 14px;
    color: #666;
}

.history-list {
    padding: 10px;
    color: #999;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
</style>